<template>
<div>
    <el-table :data="attrData" border>
        <el-table-column v-for="(item,index) in attrFields" :key="index">
            <template slot="header">
                <span>{{item}}</span>
            </template>
            <template slot-scope="scope">
                <span>{{attrData[scope.$index][`value${index+1}`]}}</span>
            </template>
        </el-table-column>
        <el-table-column label="售价">
            <template slot-scope="scope">
                <el-input v-model="attrData[scope.$index].price" type="number" placeholder=""></el-input>
            </template>
        </el-table-column>
        <el-table-column label="成本价">
            <template slot-scope="scope">
                <el-input v-model="attrData[scope.$index].cost" type="number" placeholder=""></el-input>
            </template>
        </el-table-column>
        <el-table-column label="原价">
            <template slot-scope="scope">
                <el-input v-model="attrData[scope.$index].ot_price" type="number" placeholder=""></el-input>
            </template>
        </el-table-column>
        <el-table-column label="库存">
            <template slot-scope="scope">
                <el-input v-model="attrData[scope.$index].stock" type="number" placeholder=""></el-input>
            </template>
        </el-table-column>
        <el-table-column label="产品编号">
            <template slot-scope="scope">
                <el-input v-model="attrData[scope.$index].bar_code" type="number" placeholder=""></el-input>
            </template>
        </el-table-column>
        <el-table-column label="重量(KG)">
            <template slot-scope="scope">
                <el-input v-model="attrData[scope.$index].weight" type="number" placeholder=""></el-input>
            </template>
        </el-table-column>
        <el-table-column label="体积(m³)">
            <template slot-scope="scope">
                <el-input v-model="attrData[scope.$index].volum" type="number" placeholder=""></el-input>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button type="danger" @click="deleteAttr(scope.$index)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</div>
</template>

<script>
export default {
    props: {
        attrData: {
            type: Array,
            default: function() {
                return [];
            }
        },
        attrFields: {
            type: Array,
            default: function() {
                return [];
            }
        }
    },
    data() {
        return {

        }
    },
    methods: {
        deleteAttr(index) {
            this.attrData.splice(index, 1);
        }
    }
}
</script>

<style>

</style>
